<template>
  <div>
    <div class="topbanner">
      <div class="banner">
        <div class="logo">
          <img src="../../../assets/img/logo@3x.png" />
        </div>
        <div class="title">
          <h2>医生登录</h2>
        </div>
      </div>
    </div>

    <!-- 登录盒子 -->
    <div class="ulogin_box">
      <!-- 卡片 -->
      <el-card class="box_card">
        <!-- <div slot="header" class="clearfix" style="margin-left:185px;">
    <h2>医生登录</h2>
    </div> -->
        <!-- 登录表单 -->
        <el-form
          :model="loginForm"
          status-icon
          :rules="rules"
          ref="loginForm"
          label-width="25px"
          class="demo-loginForm"
        >
          <br /><br />
          <!-- 用户名 -->
          <el-form-item prop="title">
            <el-input
              type=""
              v-model.lazy="loginForm.title"
              autocomplete="off"
              placeholder="请输入用户名"
            >
            </el-input>
          </el-form-item>
          <!-- 手机号 -->
          <el-form-item prop="zhanghao">
            <el-input
              type="zhanghao"
              v-model.lazy="loginForm.zhanghao"
              autocomplete="off"
              placeholder="请输入账号"
            >
            </el-input>
          </el-form-item>

          <!-- 密码 -->
          <el-form-item prop="mima">
            <el-input
              type="password"
              v-model.lazy="loginForm.mima"
              autocomplete="off"
              placeholder="请输入密码"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd2">
            <el-input
              type="password"
              v-model.lazy="loginForm.pwd2"
              autocomplete="off"
              placeholder="确认密码"
            >
            </el-input>
          </el-form-item>
          <!-- 登录提交按钮 -->
          <el-form-item class="button">
            <el-row :gutter="120">
              <el-col :span="12">
                <el-button
                  style="
                    width: 100%;
                    background: #7440d8;
                    color: azure;
                    border: none;
                  "
                  @click="submitForm('loginForm')"
                  >登 录</el-button
                >
              </el-col>
              <el-col :span="12">
                <el-button style="width: 100%" @click="resetForm('loginForm')"
                  >重 置</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapState } from "pinia";
import useCounterStore from "../../../store/index";
export default {
  data() {
    // 用户名
    var doctorname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback(new Error("长度在 2 到 10 个字符"));
      }
    };
    // 账号
    var zhanghao = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else if (!this.isPhone(value)) {
        //引入methods中封装的检查手机格式的方法
        callback(new Error("请输入11位的数字"));
      } else {
        callback();
      }
    };
    // 密码
    var mima = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.loginForm.pwd2 !== "") {
          this.$refs.loginForm.validateField("pwd2");
        }
        callback();
      }
    };
    var pwd2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.loginForm.mima) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 验证loginForm对象属性
       doctor:useCounterStore(),
      loginForm: {
        title: "",
        zhanghao: "",
        mima: "",
        pwd2: "",
      },
      // 验证规则:属性名称要和表单对象的属性名称保持一致，否则会失效
      rules: {
        // 用户名
        title: [
          // 用户名校验规则
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        zhanghao: [{ validator: zhanghao, trigger: "blur" }],
        // 密码
        mima: [
          { validator: mima, trigger: "blur" },
          { min: 6, max: 10, message: "长度在 6 到 10个字符" },
          {
            pattern: /^(\w){6,10}$/,
            message: "只能输入6-10个字母、数字、下划线",
          },
        ],
        // 二次密码
        pwd2: [{ validator: pwd2, trigger: "blur" }],
       
      },
    };
  },

  // mounted() {
  //   this.$axios({
  //               url:'/doctorlogin',
  //               method:'POST',
  //           }).then(res=>{
  //             console.log(res);
  //             if (res.data.code==4001) {
  //               this.$router.push("/home")
  //             }
  //             })
  //    this.$axios({
  //     url:'/test1',
  //     method:"GET"
  //    }).then(res=>{
  //             console.log(res,11111);
  //             })
  // },

  methods: {
    // 检查手机号码是否正确
    isPhone(val) {
      if (!/^1(1|2|3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      } 
    },

    // 点击登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(666);
          this.$axios({
            url: "/doctorlogin",
            method: "POST",
            data: {
              title: this.loginForm.title,
              zhanghao: this.loginForm.zhanghao,
              mima: this.loginForm.mima,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.code === 2008) {
              // 成功后提示
              this.$message({
                message: "成功登录,欢迎来到该网页",
                type: "success",
              });

              // 把医生的信息设置到仓库中去
              this.doctor.id=res.data.id
              this.doctor.imgURl=res.data.img,
               this.doctor.doctorName=res.data.doctorName
               this.$axios({
                url:"/goOnline",
                params:{did:res.data.id}
               })

              
              //成功之后跳转主页
              this.$router.push(
                { path:"/doctorPage",
                  query:{ doctorId:res.data.id} 
                });
            } else if (res.data.code === 4009) {
              this.$message.error("密码错误");
            } else if (res.data.code === 4005) {
              this.$message.error("输入有误,该医生不存在!");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.topbanner {
  height: 80px;
  width: 100%;
  background-color: #f8f7fb;
}
.banner {
  width: 1060px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  justify-content: left;
}
.banner .logo {
  width: 152px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner .logo img {
  width: 152px;
  height: 55px;
}
.banner .title {
  margin-left: 50px;
  margin-top: 40px;
  color: #333333;
}
/* 登录大盒子 */
.ulogin_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 卡片 */
.box_card {
  margin-top: 50px;
  width: 500px;
  height: 320px;
  background-color: #fcfcfc;
}
.loginFrom {
  height: 200px;
  width: 300px;
  box-shadow: 00 25px #cac6c6;
}
.button {
  margin-left: 90px;
  margin-top: 30px;
}
.span {
  color: #555454;
  font-size: 10px;
  margin-left: 10px;
}
</style>